<template>
    <div class='optionSet'>
        <div class='optionSet_left'>
            <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText">
            </el-input>

            <el-tree
                class="filter-tree"
                :data="data"
                :props="defaultProps"
                default-expand-all
                :filter-node-method="filterNode"
                @node-click="nodeClick"
                ref="tree">
            </el-tree>
        </div>
        <div class='optionSet_content'>
            <div class='optionSet_head'>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item >{{this.parentName}}</el-breadcrumb-item>
                <el-breadcrumb-item> {{this.selectname}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            
            <table-edit2 :listField="listField" :data="dataNew" dataField="item" ref="tableEdit"></table-edit2>
            <div style='width:100%;text-align:center'>
                <el-button type="primary" style='margin-top:20px' @click="save">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script>

import tableEdit2  from '../../components/edit/tableEdit2.vue'
export default {
    data(){
        return{
            type:""
        }
    },
    created(){
        if(this.$route.query.type)
            this.type = this.$route.query.type;
    },
    components: {
        tableEdit2
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
      nodeClick(data,node){
          console.log(data);
          this.selectname=data.label;
          this.parentName=data.parent;
          this.$post(this.appid,"api/optionSet/optionSetData",{selectname:escape(data.label)}).then(data=>{
             
               this.tableData=data;
               //this.dataNew["item"]=this.tableData;
               this.$set(this.dataNew,"item",this.tableData);
          })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      loadTree(){
          this.$post(this.appid,"api/optionSet/optionSetTree",{type:escape(this.type)}).then(data=>{
            this.data=data;
            this.selectname=this.data[0].children[0].label;
            this.parentName=this.data[0].children[0].parent;
            this.$post(this.appid,"api/optionSet/optionSetData",{selectname:escape(this.selectname)}).then(data2=>{
               
                this.tableData=data2;
                this.shows=true;
                this.$set(this.dataNew,"item",this.tableData);
            })
          })
      },
      save(){
         // this.tableData=this.$refs.tableEdit.getData();
         
        
          //optionSetSave
          this.$post(this.appid,"api/optionSet/optionSetSave",{selectname:escape(this.selectname),parentName:escape(this.parentName),data:JSON.stringify(this.dataNew["item"])}).then(data=>{
              // this.$message(data[0].msg);
               this.$message({
                    message: data[0].msg,
                    type: 'success'
                });
          })
      }
    },
    created(){
        this.loadTree();
          if(this.$route.query.appid){
            this.appid=this.$route.query.appid;
        }
    },
    data(){
        return{
            shows:false,
            appid:"api",
            filterText: '',
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            listField:[{
                id:'optname',
                label:'文本',
                type:'text',
                width:'200'
            },{
                id:'optvalue',
                label:'值',
                type:'text',
                width:'200'
            },{
                id:'c_ex5',
                label:'拼音',
                type:'text',
                width:'200'
            },{
                id:'c_ex6',
                label:'五笔',
                type:'text',
                width:'200'
            }],
            selectname:'',
            parentName:'',
            tableData:[],
            dataNew:{
                item:[]
            }
        }
    }
}
</script>
<style scoped>
    .optionSet{
        width:100%;
        height:100%;
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
    }
    .optionSet_left{
        width:300px;
        height:100%;
        border-right:1px solid #ddd;
        padding:10px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        overflow:auto;
    }
    .optionSet_content{
        flex:1;
        height:100%;
        padding:10px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        overflow:hidden;
        display:flex;
        flex-direction:column;
    }
    .optionSet_head{
        height:50px;
        background:#ddd;
        margin-bottom:20px;
        line-height:50px;
        padding:20px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        border-radius: 5px;
    }
</style>